<template>
	<view class="upload-box" v-if="showUpload">
		<view class="item" @click="uploadImg">
			<view class="icon">
				<text class="iconfont icon-tuwenxiangqing"></text>
			</view>
		</view>
		<view class="item" @click="uploadVideo">
			<view class="icon">
				<text class="iconfont icon-shipin1"></text>
			</view>
		</view>
		<view class="item" @click="callPhone" v-if="isCall">
			<view class="icon">
				<text class="iconfont icon-24gf-phoneBubble"></text>
			</view>
		</view>

		<view class="item" v-if="platform !== 'user'">
			<view class="icon" @click="openCreateOrder">
				<text class="iconfont icon-ziyuan"></text>
			</view>
		</view>

		<view class="item" v-if="platform !== 'user'">
			<view class="icon" @click="openCreateFinal">
				<text class="iconfont icon-ziyuan"></text>
			</view>
		</view>
		<orderPopup ref="orderPopupRef" :useruuid="useruuid" :caseList="caseList" @setUploadShow="setUploadShow">
		</orderPopup>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, defineProps, defineEmits } from "vue"
	import { useImStore, useUserStore } from '@/store';
	import { getUseryPhone, askOrderEnd } from '@/api/index';
	import orderPopup from "./order-popup.vue";
	import useRouter from "@/hooks/useRouter"
	import { uploadFile } from "../../api/common";
	const emits = defineEmits(['getAskOrderInfo', 'setUploadShow']);
	const props = defineProps({
		// 是否显示语音输入按钮
		useruuid: { type: String, },
		isCall: { type: Boolean, default: false },
		showUpload: { type: Boolean, default: false },
		platform: { type: String, default: 'user' },
		askOrderInfo: { type: Array, default: 'user' },
		caseList: { type: Array, },
	});

	const router = useRouter();
	const imStore = useImStore();
	const userStore = useUserStore();
	const orderPopupRef = ref(null);
	const openCreateOrder = () => {
		orderPopupRef.value.openCreateOrder();
	}
	const openCreateFinal = () => {
		orderPopupRef.value.openCreateFinal();
	}
	const setUploadShow = () => {
		emits('setUploadShow');
	}
	// 发送图片
	const uploadImg = () => {
		// #ifdef MP-WEIXIN
		uni.chooseMedia({
			count: 1,
			mediaType: ['image'], // 图片
			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			success: (res : any) => {
				uploadFile(res.tempFiles[0].tempFilePath).then((apiFile) => {
					imStore.sendMessage({ file: res, imgUrl: apiFile.data.src }, 'image', props.useruuid);
					setUploadShow();
				})

			}
		});
		// #endif
		// #ifndef MP-WEIXIN
		uni.chooseImage({
			count: 1,
			success: (res) => {
				uploadFile(res).then((apiFile) => {
					imStore.sendMessage({ file: res, imgUrl: apiFile.data.src }, 'image', props.useruuid);
					setUploadShow();
				})
			}
		});
		// #endif
	};
	// 发送视频
	const uploadVideo = () => {
		// #ifdef MP-WEIXIN
		uni.chooseMedia({
			mediaType: ['video'], // 视频
			count: 1,
			sourceType: ['album', 'camera'], // album 从相册选视频，camera 使用相机拍摄
			maxDuration: 60, // 设置最长时间60s
			success: (res : any) => {
				let all = [uploadFile(res.tempFiles[0].tempFilePath), uploadFile(res.tempFiles[0].thumbTempFilePath)]
				Promise.all(all).then((apiFile : any) => {
					imStore.sendMessage({ file: res, videoUrl: apiFile[0].data.src, videoThumb: apiFile[1].data.src }, 'video', props.useruuid);
					setUploadShow();
				})
			}
		});
		// #endif
		// #ifndef MP-WEIXIN
		uni.chooseVideo({
			count: 1,
			sourceType: ['album', 'camera'], // album 从相册选视频，camera 使用相机拍摄
			maxDuration: 60, // 设置最长时间60s
			success: (res : any) => {
				let all = [uploadFile(res.tempFiles[0].tempFilePath), uploadFile(res.tempFiles[0].thumbTempFilePath)]
				Promise.all(all).then((apiFile : any) => {
					imStore.sendMessage({ file: res, videoUrl: apiFile[0].data.src, videoThumb: apiFile[1].data.src }, 'video', props.useruuid);
					setUploadShow();
				})
			}
		});
		// #endif
	};
	const callPhone = () => {
		uni.$wdToast.confirm('点击确认后当前会拨打对方电话，请先确认对方是否方便接听', '提示').then(async (res : any) => {
			let dateTime = new Date().getTime();
			let roomId = props.useruuid + '-' + userStore.uuid + '-' + dateTime;
			let deadline = dateTime + 1000 * 60 * 0.5
			let msgRes = await imStore.sendMessage(
				{
					data: 'voice-call',
					description: '',
					extension: JSON.stringify({
						roomId: roomId,
						startTime: dateTime,
						deadline: deadline, // 通话邀请一分钟
						// ...friend.data.userProfile,
						show: 'false'
					})
				},
				'custom',
				props.useruuid
			);
			if (msgRes.code === 0 && msgRes.data.message) {
				uni.$emit('on-voice-call', {
					...msgRes.data.message,
					in: false,
				});
				router.push({
					url: '/im/video-call/video-call',
					params: {
						roomId: roomId,
						myId: userStore.uuid,
						userId: userStore.uuid,
						friendId: props.useruuid,
					}
				});
			}

			// getUseryPhone({
			// 	uuid: imStore.currentConversation.userProfile.userID
			// }).then((res) => {
			// 	uni.makePhoneCall({
			// 		phoneNumber: res.phone,
			// 		success: () => {
			// 			let temp : any = props.askOrderInfo.find((item) => item.ask_type_id === 2);
			// 			askOrderEnd({
			// 				ask_order_id: temp.id
			// 			}).then((res : any) => {
			// 				emits('getAskOrderInfo')
			// 				setUploadShow();
			// 			});
			// 		}
			// 	});
			// });
		});
	};
</script>

<style scoped lang="less">
	.upload-box {
		position: fixed;
		bottom: 0rpx;
		height: calc(500rpx - 24rpx - 24rpx);
		padding: 24rpx;
		width: calc(100% - 24rpx - 24rpx);
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;

		.item {
			width: calc(100% / 4);
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.iconfont {
				font-size: 60rpx;
			}
		}
	}
</style>